<template>
	<view class="page">
		<image class="bg" src="../../../static/images/orderBg.png" mode="widthFix"></image>
		<view class="top-info">
			<view class="title">待付款</view>
			<view class="subtitle">
				<text class="time">14:20</text>
				后自动取消
			</view>
		</view>
		<view class="address">
			<view class="address-top">
				<image class="address-icon" src="../../../static/icon/address.png" mode="widthFix"></image>
				<view class="address-center">
					<view class="address-center-main">重庆重庆市江北区红旗河沟街道世纪英皇南塔23-2</view>
					<view class="address-center-bottom">李爆爆 13121345567</view>
				</view>
			</view>
			<view class="address-bottom">
				<view class="address-bottom-left">
					<image class="address-bottom-left-icon" src="../../../static/icon/my/3.1待收货.png" mode="widthFix"></image>
					<text class="address-bottom-left-text">配送方式</text>
				</view>
				<view class="address-bottom-right">快递 免运费</view>
			</view>
		</view>
		<view class="page-main">
			<view class="content">
				<image class="product" src="../../../static/logo.png" mode="aspectFill"></image>
				<view class="right">
					<view class="right-top">
						<text class="name">定力之门 (土)</text>
						<text class="sku">规格：土系</text>
					</view>
					<view class="right-bottom">
						<text class="money">¥999.00</text>
						<text class="num">x1</text>
					</view>
				</view>
			</view>
			<view class="page-main-bottom">合计 ¥996.00</view>
		</view>
		<view class="page-bottom">
			<view class="top">
				<text class="lable">支付方式</text>
				<view class="right">
					<image class="icon" src="../../../static/icon/路径.png" mode="widthFix"></image>
					<text class="text">微信支付</text>
				</view>
			</view>
			<view class="bottom">
				<view class="lable">备注</view>
				<input placeholder-class="plaClass" class="remark" type="text" v-model="remark" placeholder="如有备注请填写" />
			</view>
		</view>
		<view class="pay-button">支付</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	}
};
</script>

<style lang="scss" scoped>
.page {
	padding-bottom: 150rpx;
}
%box {
	box-shadow: 0rpx 12rpx 30rpx 0rpx rgba(0, 0, 0, 0.06);
}
.bg {
	width: 750rpx;
	position: absolute;
	top: 38rpx;
	z-index: -1;
}
.top-info {
	padding: 30rpx 0 0 38rpx;
	.title {
		font-family: SourceHanSerifCN, SourceHanSerifCN;
		font-weight: 500;
		font-size: 52rpx;
		color: #333333;
		line-height: 52rpx;
	}
	.subtitle {
		margin-top: 22rpx;
		font-family: SourceHanSerifCN, SourceHanSerifCN;
		font-weight: 400;
		font-size: 28rpx;
		color: #696969;
		line-height: 28rpx;
		text-align: left;
		font-style: normal;
		.time {
			color: #d21414;
		}
	}
}
.address {
	width: 690rpx;
	padding: 38rpx 30rpx;
	margin: 42rpx auto 0;
	box-sizing: border-box;
	background-color: #fff;
	@extend %box;
	border-radius: 20rpx;
	.address-top {
		display: flex;
		align-items: flex-start;
		.address-icon {
			width: 29rpx;
			margin-top: 10rpx;
		}
		.address-center {
			width: 524rpx;
			display: flex;
			flex-direction: column;
			margin-left: 20rpx;
			.address-center-main {
				font-family: SourceHanSerifCN, SourceHanSerifCN;
				font-weight: 600;
				font-size: 28rpx;
				color: #333333;
				line-height: 40rpx;
			}
			.address-center-bottom {
				margin-top: 20rpx;
				font-family: SourceHanSerifCN, SourceHanSerifCN;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				line-height: 40rpx;
			}
		}
	}
	.address-bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 30rpx;
		.address-bottom-left {
			display: flex;
			align-items: center;
			.address-bottom-left-icon {
				width: 29rpx;
				margin-right: 20rpx;
			}
			.address-bottom-left-text {
				font-family: SourceHanSerifCN, SourceHanSerifCN;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				line-height: 40rpx;
			}
		}
		.address-bottom-right {
			font-family: SourceHanSerifCN, SourceHanSerifCN;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			line-height: 40rpx;
		}
	}
}
.page-main {
	width: 690rpx;
	padding: 30rpx;
	margin: 30rpx auto 0;
	box-sizing: border-box;
	background-color: #fff;
	border-radius: 20rpx;
	@extend %box;
	.content {
		display: flex;
		align-items: center;
		padding: 26rpx 0 30rpx;
		border-bottom: 2rpx solid #ebebeb;
		.product {
			width: 160rpx;
			height: 160rpx;
			margin-right: 30rpx;
			border-radius: 10rpx;
		}
		.right {
			height: 160rpx;
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.right-top {
				display: flex;
				flex-direction: column;
				.name {
					font-family: SourceHanSerifCN, SourceHanSerifCN;
					font-weight: 500;
					font-size: 32rpx;
					color: #303133;
					line-height: 46rpx;
				}
				.sku {
					font-family: SourceHanSerifCN, SourceHanSerifCN;
					font-weight: 400;
					font-size: 24rpx;
					color: #909399;
					line-height: 34rpx;
					margin-top: 10rpx;
				}
			}
			.right-bottom {
				display: flex;
				justify-content: space-between;
				.money {
					font-family: SourceHanSerifCN, SourceHanSerifCN;
					font-weight: 500;
					font-size: 24rpx;
					color: #333333;
					line-height: 34rpx;
				}
				.num {
					font-family: SourceHanSerifCN, SourceHanSerifCN;
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
					line-height: 34rpx;
				}
			}
		}
	}
	.page-main-bottom {
		display: flex;
		justify-content: flex-end;
		font-family: SourceHanSerifCN, SourceHanSerifCN;
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
		line-height: 40rpx;
		margin-top: 26rpx;
	}
}
.page-bottom {
	width: 690rpx;
	padding: 30rpx;
	margin: 30rpx auto 0;
	box-sizing: border-box;
	background-color: #fff;
	border-radius: 20rpx;
	@extend %box;
	display: flex;
	flex-direction: column;
	.top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 32rpx;
		border-bottom: 2rpx solid #ebebeb;
		.lable {
			font-family: SourceHanSerifCN, SourceHanSerifCN;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			line-height: 40rpx;
		}
		.right {
			display: flex;
			align-items: center;
			.icon {
				width: 45rpx;
				margin-right: 12rpx;
			}
			.text {
				font-family: SourceHanSerifCN, SourceHanSerifCN;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				line-height: 40rpx;
			}
		}
	}
	.bottom {
		display: flex;
		align-items: center;
		margin-top: 26rpx;
		.lable {
			font-family: SourceHanSerifCN, SourceHanSerifCN;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			line-height: 40rpx;
		}
		.remark {
			flex: 1;
			margin-left: 20rpx;
		}
		.plaClass {
			text-align: right;
		}
	}
}
.pay-button {
	position: fixed;
	border-radius: 10rpx;
	bottom: 50rpx;
	height: 90rpx;
	left: 50%;
	transform: translate(-50%);
	width: 690rpx;
	background-color: $uni-theme-color;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: SourceHanSerifCN, SourceHanSerifCN;
	font-weight: 500;
	font-size: 32rpx;
	color: #ffffff;
	line-height: 46rpx;
}
</style>
